<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Javascript &amp; jQuery opdrachten</title>
<link href="_css/site.css" rel="stylesheet">

<script src="_js/jquery-1.7.2.min.js"></script>
<script>
//globale variable lijst voor een array met getallen
var lijst = [22,33,9];
/*
*  functie getGetal haalt het getal op in de div met id getal
*  Deze functie heeft geen parameters
*  @return een geheel getal 
*/
function getGetal() {
		return parseInt($('#getal').val());
}

/*
*  De functie add() voegt het ingevulde getal in de de div met id= 'getal' toe aan de globale variabele lijst
*  Als de ingevulde wwaarde geen getal is dan gebeurt er niets.
*  Als het wel een getal is dan wordt het getal toegevoegd aan de variabele lijst en wordt de lijst geprint
*  in de span met id='lijst' 
*  geen parameters
*  geen return waardes
*/
function add() {
	getal = getGetal();
	if (isNaN(getal)) {
		return;
	}
	else {			
		lijst.push(getal);
		printLijst();
	}
}
/* de functie printLijst() print alle getallen uit de variabele lijst in de div met id=lijst
*  geen parameters
*  geen return waardes
*/
function printLijst() {
	var strLijst = '', del='';
	
	for (var i=0; i<lijst.length; i++) {
		strLijst =  strLijst + del + lijst[i];
        del = ',';		
	}
	
	printInHtml( 'lijst', strLijst );
}

/* De functie printInHtml print een tekst in de html tag met id=plek
*  @param1 plek is een string met de id van de html waar de tekst moet worden toegevoegd
*  @param2 tekst is een string die wordt gezet in de html tag met id=tekst
*/ 
function printInHtml(plek, tekst) {
	$('#'+plek).html(tekst);
}


function countLijst() {
     alert('countLijst() wordt aangeroepen');
}

function countDistinct() {
     alert('countDistinct() wordt aangeroepen');
	 var unieke = [];
	 
	 for( x=0 ; x <lijst.length; x++) {
		   var isUniek = true;
		   for (y=0; y < unieke.length; y++) {
					if (lijst[x] == unieke[y]) {
						isUniek=false;
					}
		   }
		   if (isUniek == true) {
				alert(lijst[x] + ' is uniek');
				unieke.push(lijst[x]);
			}
			else {
					alert(lijst[x] + ' is NIET uniek');
			}
	 }
	 
	 printInHtml('resultaat','Aantal unieke elementen ' + unieke.length);
	 
}

function deleteFirst() {
     alert('deleteFirst() wordt aangeroepen');
}

function deleteLast() {
     alert('deleteLast() wordt aangeroepen');
}

function sum() {
     alert('sum() wordt aangeroepen');
}

function average() {
     alert('average() wordt aangeroepen');
}

$(document).ready(function() {
	printLijst();
});


</script>
</head>
<body>
<div class="wrapper">
  <div class="header">
    <p class="logo">JavaScript <i>&</i> jQuery <i class="mm">KW1C<br>ICT-academie</i></p>
  </div>
  <div class="content">
    <div class="main">
      <h1>Javascript opdracht 4B</h1>
      <script>
		
	  </script> 
	  <form id="order">
		<fieldset>
			<legend></legend>
			<label>Voer een getal in:</label>
			<input id="getal" name="getal" size="3" type="text" value="0" maxlength="3">
			<p>Lijst:     <span id="lijst">lege lijst</span></p>
			<p>Resultaat: <span id="resultaat"></span></p>
		</fieldset>
		<fieldset>
		<input type="button" name="b1" value="Voeg toe" onclick="javascript:add()">
		<input type="button" name="b2" value="Aantal elementen" onclick="javascript:countLijst()">
		<input type="button" name="b3" value="Aantal unieke elementen" onclick="javascript:countDistinct()">
		<input type="button" name="b4" value="Verwijder eerste" onclick="javascript:deleteFirst()">
		<input type="button" name="b5" value="Verwijder laatste" onclick="javascript:deleteLast()">
		<input type="button" name="b6" value="Som" onclick="javascript:sum()">
		<input type="button" name="b7" value="Gemiddelde" onclick="javascript:average()">
		</fieldset>
	  </form>
	  <p id="status">
	  </p>
    </div>
  </div>
  <div class="footer">
    <p>JavaScript &amp; jQuery, W. van Bijnen en A. Saebu, BOL 4 - opleiding tot Applicatie ontwikkelaar (2013).</p>
  </div>
</div>
</body>
</html>
